<template>
  <div class="bone-padding-10">
        <el-row style="margin-top:10px; margin-bottom: 20px;">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>门禁管理</el-breadcrumb-item>
                <el-breadcrumb-item>门禁列表</el-breadcrumb-item>
            </el-breadcrumb>
        </el-row>
        <el-row :gutter="10">
            <el-col :span='4'>
                <el-button v-if='!form.isShow' size="small" type="primary" @click='toAdd'>新增门禁</el-button>
                <el-button v-else size="small" type="primary" @click='form.isShow=false'>返回列表</el-button>
            </el-col>
            <el-col :span='2' v-show='!form.isShow'>
                <el-select size="small" v-model="table.deptId" clearable placeholder="请选择部门" @change='deptChange'>
                    <el-option v-for='item in table.depts' :key='item.deptId' :label="item.name" :value="item.deptId"></el-option>
                </el-select>
            </el-col>
            <el-col :span='4' v-show="!form.isShow">
                <el-input size="small" placeholder="请输入名称或者设备号" suffix-icon="el-icon-search" v-model="table.queryKey" @keyup.enter.native="getTableData"></el-input>
            </el-col>
        </el-row>

        <!--表格-->
        <el-row  class="bone-top-10" v-show='!form.isShow'>
            <el-table :data='table.tableData' border stripe style='width:100%' size="small" :highlight-current-row="true" ref="multipleTable">
                <el-table-column width="80" label="编号" prop='doorAccessId'></el-table-column>
                <el-table-column width="150" label="设备号" prop='devId'></el-table-column>
                <el-table-column width="150" label="设备名称" prop='name'></el-table-column>
                <el-table-column width="150" label="部门" prop='deptName'></el-table-column>
                <el-table-column width="100" label="是否在线">
                    <template slot-scope="scope">
                        <span style="font-size:20px;">
                                <i v-if='scope.row.onLine==1' class="el-icon-check"></i>
                                <i v-else class="el-icon-close"></i>
                            </span>
                    </template>
                </el-table-column>
                <el-table-column width="150" label="地址" prop='host'></el-table-column>
                <el-table-column width="100" label="端口" prop='port'></el-table-column>
                <el-table-column width="100" label="品牌" prop='devBrand'></el-table-column>
                <el-table-column width="100" label="型号" prop='devModel'></el-table-column>
                <el-table-column width="100" label="版本" prop='devVersion'></el-table-column>

                <el-table-column width="150" label="创建时间" prop='createTime'></el-table-column>
                <el-table-column width="100" label="经度" prop='lng'></el-table-column>
                <el-table-column width="100" label="纬度" prop='lat'></el-table-column>
                <el-table-column fixed="right" min-width="250" label="操作">
                    <template slot-scope='scope'>
                        <span v-if='form.deptId==scope.row.deptId'>
                            <el-button type="text" @click="modify(scope.row)">修改</el-button>
                            <el-button type="text" @click="toDel(scope.row.doorAccessId)">删除</el-button>
                        </span>
                        <span style="margin-left:10px;">
                            <el-button type='text' @click='lookDoor(scope.row.doorAccessId)'>查看门</el-button>
                            <el-button type='text' @click='lookEvent(scope.row.doorAccessId)'>查看事件</el-button>
                        </span>
                        
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination class='bone-top-10 my-el-pagination' @current-change="handleCurrentChange" :current-page="this.table.currentPage" :page-size="this.table.pageSize" layout="total, prev, pager, next, jumper" :total="this.table.rowCount"></el-pagination>
        </el-row>

        <!--表单-->
        <el-row v-show='form.isShow' class="bone-top-10">
            <el-col :span='6'>
                <el-card>
                    <div slot='header'>
                        <span>{{form.formTitle}}</span>
                    </div>
                    <el-form :model="form" :rules="form.rules" ref='form' size='small' label-width="80px" label-position="right">
                        <el-form-item label="设备名称" prop="name">
                            <el-input v-model="form.name" placeholder="请输入设备名称"></el-input>
                        </el-form-item>
                        <el-form-item label="设备号" prop="devId">
                            <el-input v-model="form.devId" placeholder="请输入设备号"></el-input>
                        </el-form-item>
                        <el-form-item label="地址" prop="host">
                            <el-input v-model="form.host" placeholder="请输入地址"></el-input>
                        </el-form-item>
                        <el-form-item label="端口" prop="port">
                            <el-input v-model.number="form.port" placeholder="请输入端口"></el-input>
                        </el-form-item>
                        <el-form-item label="品牌" prop="devBrand">
                            <el-input v-model="form.devBrand" placeholder="请输入品牌"></el-input>
                        </el-form-item>
                        <el-form-item label="型号" prop="devModel">
                            <el-input v-model="form.devModel" placeholder="请输入型号"></el-input>
                        </el-form-item>
                        <el-form-item label="版本" prop="devVersion">
                            <el-input v-model="form.devVersion" placeholder="请输入版本"></el-input>
                        </el-form-item>
                        <el-form-item label="经度" prop="lng">
                            <el-input-number v-model="form.lng" placeholder="请输入经度" style="width:100%"></el-input-number>
                        </el-form-item>
                        <el-form-item label="纬度" prop="lat">
                            <el-input-number v-model="form.lat" placeholder="请输入纬度" style="width:100%"></el-input-number>
                        </el-form-item>
                        <el-form-item>
                            <el-button  @click="submitForm('form')" type="primary" :disabled='form.submitDisabled'>保存</el-button>
                            <el-button  @click="form.isShow=false" type="primary">返回</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </el-col>
        </el-row>

        <!--门表格 - 弹窗-->
        <el-dialog title='门列表' :visible.sync="doorDialog.dialog" width='950px'>
            <el-table :data='doorDialog.tableData'
                border stripe style='width:100%' size="small" 
                :highlight-current-row="true" ref="doorDialogTable">
                <el-table-column width="100" label="门编号" prop='doorId'></el-table-column>
                <el-table-column width="150" label="门名称" prop='name'></el-table-column>
                <el-table-column min-width="150" label="门设备号" prop='devId'></el-table-column>
                <el-table-column width="150" label="部门" prop='deptName'></el-table-column>
                <el-table-column width="150" label="创建时间" prop='createTime'></el-table-column>
                <el-table-column width="100" label="经度" prop='lng'></el-table-column>
                <el-table-column width="100" label="纬度" prop='lat'></el-table-column>
            </el-table>
            <el-pagination class='bone-top-10 my-el-pagination' 
                @current-change="handleDialogChange" 
                :current-page="this.doorDialog.currentPage" 
                :page-size="this.doorDialog.pageSize" 
                :total="this.doorDialog.rowCount"
                layout="total, prev, pager, next, jumper">
            </el-pagination>
        </el-dialog>

        <!--事件表格 - 弹窗-->
        <el-dialog title='事件列表' :visible.sync="eventDialog.dialog" 
        width='1200px'>
            <el-table :data='eventDialog.tableData'
            border stripe style='width:100%' size="small"
            :highlight-current-row="true" ref="eventDialogTable">
                <el-table-column width="80" label="编号" prop='id'></el-table-column>
                <el-table-column min-width="150" label="门" prop='doorName'></el-table-column>
                <el-table-column min-width="150" label="部门" prop='deptName'></el-table-column>
                <el-table-column min-width="150" label="门卡" prop='cardDevId'></el-table-column>
                <el-table-column width="100" label="人员" prop='empName'></el-table-column>
                <el-table-column width="80" label="事件">
                    <template slot-scope='scope'>
                        <span v-if='scope.row.doorEvent==1'>进门</span>
                        <span v-if='scope.row.doorEvent==2'>出门</span>
                        <span v-if='scope.row.doorEvent==3'>无效卡</span>
                    </template>
                </el-table-column>
                <el-table-column width="80" label="事件类型">
                    <template slot-scope='scope'>
                        <span v-if='scope.row.eventType==1'>开门</span>
                        <span v-if='scope.row.eventType==2'>关门</span>
                    </template>
                </el-table-column>
                <el-table-column width="80" label="事件触发">
                    <template slot-scope='scope'>
                        <span v-if='scope.row.trigger==1'>门卡</span>
                        <span v-if='scope.row.trigger==2'>地图</span>
                        <span v-if='scope.row.trigger==3'>其他</span>
                    </template>
                </el-table-column>
                <el-table-column width="150" label="时间" prop='createTime'></el-table-column>
            
            </el-table>
            <el-pagination class='bone-top-10 my-el-pagination' 
                @current-change="handleDialogEventChange" 
                :current-page="this.eventDialog.currentPage" 
                :page-size="this.eventDialog.pageSize" 
                :total="this.eventDialog.rowCount"
                layout="total, prev, pager, next, jumper">
            </el-pagination>
        </el-dialog>
  </div>
</template>

<script>
import Http from "@/components/utils/httpUtil";
export default {
  data(){
      return {
          form: {
              isCreate: true,
              isShow: false,
              formTitle: '',
              submitDisabled: false,
              doorAccessId: '',
              deptId: '',
              host: '',
              port: '',
              devBrand: '',
              devModel: '',
              devVersion: '',
              name: '',
              devId: '',
              lng: 114.305438,
              lat: 30.542376,
              rules: {
                name: [{ required: true, message: '请输入设备名称', trigger: 'blur' }],
                devId: [{ required: true, message: '请输入设备号', trigger: 'blur' }],
                host: [{ required: true, message: '请输入地址', trigger: 'blur' }],
                port: [
                    { required: true, message: '请输入端口'}, 
                    { type: "number", message: "端口必须是数字"}
                ],
                devBrand: [{ required: true, message: '请输入品牌', trigger: 'blur' }],
                devModel: [{ required: true, message: '请输入型号', trigger: 'blur' }],
                devVersion: [{ required: true, message: '请输入版本', trigger: 'blur' }],
              }
          },
          table: {
              queryKey: '',
              tableData: [],
              deptId: '',
              depts: [],
              currentPage: 1,
              pageSize: 10,
              rowCount: 0
          },
          doorDialog:{
            dialog: false,
            tableData: [],
            currentPage: 1,
            pageSize: 10,
            rowCount: 0,
            doorAccessId: ''
          },
          eventDialog:{
              dialog: false,
              tableData: [],
              currentPage: 1,
              pageSize: 10,
              rowCount: 0,
              doorAccessId: ''
          }
      }
  },
  methods:{
        init(){
            let userInfo = JSON.parse(localStorage.getItem('userInfo'))
            this.form.deptId = userInfo.deptId
        },

        //部门下拉选择变化
        deptChange(){
            this.getTableData();
        },

        //table翻页
        handleCurrentChange(val) {
            this.table.currentPage = val;
            this.getTableData();
        },
        getTableData(){
            let p = {};
            p.start = (this.table.currentPage - 1) * this.table.pageSize;
            p.num = this.table.pageSize;
            p.key = this.table.queryKey;
            p.deptId = this.table.deptId
            Http.fetch('/doorAccess/listQuery', p)
                .then(res => {
                    this.table.tableData = res.data.rows;
                    this.table.rowCount = res.data.total;
                })
        },
        //获取部门树
        getTreeData(){
            let p = {};
            Http.fetch('/dept/listTree',p)
            .then(res=>{
                this.table.depts = res.data;
            })
        },
        toAdd(){
            this.form.isShow = true
            this.form.isCreate = true
            this.form.formTitle = '新增门禁控制器'
            this.form.name = ''
            this.form.devId = ''
            let userInfo = JSON.parse(localStorage.getItem('userInfo'))
            this.form.lng = userInfo.lng
            this.form.lat = userInfo.lat
            this.form.host = ''
            this.form.port = ''
            this.form.devBrand = ''
            this.form.devModel = ''
            this.form.devVersion = ''
        },
        modify(row){
            this.form.isShow = true
            this.form.isCreate = false
            this.form.formTitle = '修改门禁控制器'
            this.form.doorAccessId = row.doorAccessId
            this.form.name = row.name
            this.form.devId = row.devId
            this.form.lng = row.lng
            this.form.lat = row.lat
            this.form.host = row.host
            this.form.port = row.port
            this.form.devBrand = row.devBrand
            this.form.devModel = row.devModel
            this.form.devVersion = row.devVersion
        },
        toDel(doorAccessId){
            this.$confirm('确定删除该门禁吗?','提示',{
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
            .then(()=>{
                let p = {}
                let url = '/doorAccess/toDel'
                p.doorAccessId = doorAccessId
                return Http.fetch(url,p)
            })
            .then(res=>{
                this.$message({
                    showClose: true,
                    message: res.sucMsg,
                    type: "success"
                });
                this.getTableData();
            })
            .catch(err=>{
                if(err!='cancel'){
                    this.$message({
                        showClose: true,
                        message: err.errMsg,
                        type: "error"
                    });
                }
            })
        },
        submitForm(formName){
            this.$refs[formName].validate(valid=>{
                if(valid){
                    this.form.submitDisabled = true
                    let p = {}
                    let url
                    p.name = this.form.name
                    p.devId = this.form.devId
                    p.deptId = this.form.deptId
                    p.lng = this.form.lng
                    p.lat = this.form.lat
                    p.host = this.form.host
                    p.port = this.form.port
                    p.devBrand = this.form.devBrand
                    p.devModel = this.form.devModel
                    p.devVersion = this.form.devVersion
                    url = '/doorAccess/add'
                    if(!this.form.isCreate){
                        p.doorAccessId = this.form.doorAccessId
                        url = '/doorAccess/modify'
                    }
                    
                    Http.fetch(url,p)
                    .then(res=>{
                        this.$message({
                            showClose: true,
                            message: res.sucMsg,
                            type: "success"
                        })
                        this.getTableData()
                        this.form.submitDisabled = false
                        this.form.isShow = false
                    })
                    .catch(err=>{
                        this.form.submitDisabled = false
                        this.$message({
                            showClose: true,
                            message: err.errMsg,
                            type: "error"
                        })
                    })
                    
                }
            })
        },

        //打开门弹窗列表
        lookDoor(doorAccessId){
            this.doorDialog.doorAccessId = doorAccessId
            this.getDialogTableData()
            this.doorDialog.dialog = true
        },

        //弹窗表格获取数据
        getDialogTableData(){
            let p = {};
            let url = '/door/listByDoorAccessId'
            p.start = (this.doorDialog.currentPage - 1) * this.doorDialog.pageSize;
            p.num = this.doorDialog.pageSize;
            p.doorAccessId = this.doorDialog.doorAccessId
            Http.fetch(url,p)
            .then(res=>{
                this.doorDialog.tableData = res.data.rows;
                this.doorDialog.rowCount = res.data.total;
            })
        },
        //弹窗表格翻页
        handleDialogChange(val){
            this.doorDialog.currentPage = val;
            this.getDialogTableData();
        },

        //打开查看事件弹窗
        lookEvent(doorAccessId){
            this.eventDialog.doorAccessId = doorAccessId
            this.getDialogEventTableData()
            this.eventDialog.dialog = true
        },
        //获取事件弹窗表格数据
        getDialogEventTableData(){
            let p = {}
            let url = '/doorEvent/listQuery'
            p.start = (this.eventDialog.currentPage - 1) * this.eventDialog.pageSize;
            p.num = this.eventDialog.pageSize;
            p.doorAccessId = this.eventDialog.doorAccessId
            Http.fetch(url,p)
            .then(res=>{
                this.eventDialog.tableData = res.data.rows;
                this.eventDialog.rowCount = res.data.total;
            })
        },
        //事件弹窗表格翻页
        handleDialogEventChange(val){
            this.eventDialog.currentPage = val
            this.getDialogEventTableData()
        }

        
      
  },
  mounted(){
    this.init()
    this.getTableData()
    this.getTreeData()
  }
}
</script>
<style scoped>

</style>
